<template>
	<view class="content">
		<view class="user_info_wrap">
			<view class="text">购物车</view>
			<view style="display: inline-block;color: rgba(3, 185, 209, 1);" @click="renew()">更新</view>
		</view>
		<view class="goodsBox">
			<scroll-list ref="list" :option="option" @load="load" @refresh="refresh">
				<view class="goods-detail" v-for="(item,index) in goodsData" :key="index">
					<view class="detail-left">
						<view class="goods-left">
							<evan-checkbox v-model="item.flag" primary-color="rgba(3, 185, 209, 1)"
								style="margin-right: 30rpx;"></evan-checkbox>
							<u--image :src="item.goods.img" width="150rpx" height="140rpx"></u--image>
						</view>
						<view class="box">
							<view class="goods-item-text">{{item.goods.name}}</view>
							<view class="goods-box">
								<view class="box-let">
									<view class="kucun">{{item.goods_rule.spec_name}}</view>
									<view class="box-let-text">￥{{item.goods_rule.money}}</view>

								</view>
								<view class="box-right">
									<view class="count">
										<text class="textLeft"
											@click="$u.throttle(() => {valChange('减', item.goods_rule_id, index)}, 500)">-</text>
										<input class="input" type="number" :value="item.quantity"
											@blur="spacTypeBlur($event, item.goods_rule_id,index)" />
										<text class="textRight"
											@click="$u.throttle(() => {valChange('加', item.goods_rule_id, index)}, 500)">+</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-list>
		</view>
		<view class="end">
			<view class="end-left">
				<view class="all">
					<evan-checkbox v-model="isAllChecked" primary-color="rgba(3, 185, 209, 1)"
						style="margin-right: 30rpx;"></evan-checkbox>全选
				</view>
				<view>
					总计：<text style="color:rgba(3, 185, 209, 1);font-weight: bold;">￥ {{totalPrice.toFixed(2)}}</text>
				</view>
			</view>
			<view class="end-right" @click="overbooking()">
				去下单({{totalNum}})
			</view>
		</view>
		<u-popup :show="popupVisible" @close="close" mode="center" :closeable="true">
			<view class="popup-box">
				<view>温馨提示</view>
				<view class="popup-text">您是否确认下单?</view>
				<view>
					<u--textarea v-model="remark" maxlength="500" placeholder="请填写订单备注(非必填,最多支持500字)"></u--textarea>
					<!-- <button class="popup-button" @tap="$u.throttle(confirmOrder, 1000, false)">确认下单</button> -->
					<button class="popup-button" @click="confirmOrder" :disabled="isLoading">
						<span v-if="isLoading">下单中...</span>
						<span v-else>确认下单</span>
					</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		cartList,
		cartCreate,
		orderCreate
	} from "@/api/home.js"
	export default {
		data() {
			return {
				popupVisible: false,
				remark: '',
				isLoading: false,
				goodsData: [],
				option: {
					page: 1,
					limit: 10,
					auto: false,
					height: null
				},
				fromData: {
					page: 1,
					limit: 10
				},
			}
		},
		onShow() {
			this.goodsData = []
			this.refresh({
				page: 1
			})
		},
		mounted() {
			const query = uni.createSelectorQuery().in(this);
			query.select('.goodsBox').boundingClientRect(data => {
				this.option.height = data.height
			}).exec();
		},
		methods: {
			close() {
				this.remark = ""
				this.popupVisible = false
			},
			// 更新
			renew() {
				this.goodsData = []
				this.search()
			},
			overbooking() {
				const cart_ids = this.goodsData.filter(item => item.flag === true).map(item => item.id);
				if (cart_ids.length == 0) {
					uni.showToast({
						title: '请选择商品',
						icon: 'none',
					})
					return
				}
				this.popupVisible = true
			},
			// 下单
			confirmOrder() {
				if (this.isLoading) {
					return;
				}

				this.isLoading = true;

				try {
					// 执行提交订单的操作
					const cart_ids = this.goodsData.filter(item => item.flag === true).map(item => item.id);
					const parm = {
						cart_ids: cart_ids.join(','),
						remark: this.remark
					}
					orderCreate(parm)
						.then(res => {
							this.remark = ""
							this.popupVisible = false
							uni.$u.toast(res.msg)
							this.refresh({
								page: 1
							})
							setTimeout(() => {
								// 提交成功后重置加载状态
								this.isLoading = false;
							}, 2000);
						})
				} catch (error) {
					// 提交订单失败处理
					console.error('提交订单失败：', error);
					this.isLoading = false;
				}
			},
			valChange(event, id, index) {
				this.getCartCreate(event, id, index)
			},
			getCartCreate(value, id, index) {
				const quantity = value == '加' ? '1' : '-1'
				const parm = {
					goods_rule_id: id,
					quantity: quantity,
					is_input: 1
				}
				cartCreate(parm)
					.then(res => {
						if (res.code == 200) {
							if (value == '加') {
								this.goodsData[index].quantity++
							} else {
								if (this.goodsData[index].quantity > 1) {
									this.goodsData[index].quantity--
								} else {
									uni.$u.toast('数量为0,直接删除了!')
									this.refresh({
										page: 1
									})
									return
								}
							}
						}
					})
			},
			//  input
			spacTypeBlur(event, id, index) {
				this.getCartCreateIput(event.detail.value, id, index)
			},
			//  input加
			getCartCreateIput(quantity, id, index) {
				if (quantity <= 0) {
					uni.$u.toast('请填写正确商品数量!')
					return
				}
				const parm = {
					goods_rule_id: id,
					quantity: quantity,
					is_input: 2
				}
				cartCreate(parm)
					.then(res => {
						if (res.code == 200) {
							this.goodsData[index].quantity = quantity
						}
					})
			},
			load(paging) {
				this.fromData.page = paging.page
				this.search()
			},
			refresh(paging) {
				this.fromData.page = paging.page
				let params = {
					...this.fromData
				}
				cartList(params)
					.then(res => {
						let list = [...res.data.list].map((res) => {
							return {
								...res,
								flag: false
							}
						})
						this.goodsData = [...list]
						// 加载成功  参数对象{list: 当前列表,total: 数据总长度(后端查询的total)}
						this.$refs.list.refreshSuccess({
							list: this.goodsData,
							total: res.data.count
						})
					})
					.catch(err => {
						this.$refs.list.refreshFail()
					})
			},
			search() {
				let params = {
					...this.fromData
				}
				cartList(params)
					.then(res => {
						let list = [...res.data.list].map((res) => {
							return {
								...res,
								flag: false
							}
						})
						this.goodsData = [...this.goodsData, ...list]
						// 加载成功  参数对象{list: 当前列表,total: 数据总长度(后端查询的total)}
						this.$refs.list.loadSuccess({
							list: this.goodsData,
							total: res.data.count
						})
					})
					.catch(err => {
						this.$refs.list.loadFail()
					})
			},
		},
		computed: {
			isAllChecked: {
				get() {
					// 列表中是否都选中了
					return this.goodsData.length > 0 ? this.goodsData.every(el => el.flag == true) : false;
				},
				// 全选---->goodsData列表
				set(val) {
					this.goodsData.forEach(el => el.flag = val)
				}
			},
			totalNum() {
				let totalNum = 0;
				this.goodsData.map(item => {
					item.flag ? totalNum += Number(item.quantity) : totalNum += 0
				})
				return totalNum
			},
			totalPrice() {
				let totalPrice = 0;
				this.goodsData.map(item => {
					item.flag ? totalPrice += item.quantity * item.money : totalPrice += 0
				})
				return totalPrice
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		padding: 60rpx 30rpx;
		box-sizing: border-box;

		.user_info_wrap {
			width: 100%;
			font-size: 32rpx;
			display: flex;
			justify-content: space-between;

			.text {
				display: inline-block;
				font-size: 32rpx;
				font-weight: 400;
				color: rgba(37, 38, 38, 1);
			}
		}

		.goodsBox {
			width: 100%;
			height: calc(100vh - 320rpx);
			overflow-y: scroll;
			padding-top: 20rpx;

			.goods {
				line-height: 80rpx;
				background-color: #FFFFFF;

				&-detail {
					display: flex;
					padding: 30rpx 0rpx 30rpx 0rpx;
					background-color: #fff;
					justify-content: space-between;
					align-items: center;
					position: relative;

					.detail-left {
						display: flex;

						.goods-left {
							display: flex;
							align-items: center;
						}
					}

					.box {
						display: inline-block;
						width: 440rpx;
						height: 140rpx;
						margin-left: 20rpx;

						.goods-item-text {
							font-size: 28rpx;
							font-weight: 700;
							color: rgba(37, 38, 38, 1);
						}

						.goods-box {
							display: flex;
							justify-content: flex-end;

							.box-let {
								.box-let-text {
									font-size: 32rpx;
									font-weight: 700;
									color: rgba(3, 185, 209, 1);
								}

								.kucun {
									margin: 20rpx 0rpx;
									font-size: 20rpx;
									font-weight: 500;
									color: rgba(145, 144, 144, 1);
								}
							}

							.box-right {
								margin-left: auto;


								// 商品数量
								.count {
									position: absolute;
									bottom: 25rpx;
									right: 5rpx;

									display: flex;
									justify-content: center;
									align-items: center;
									width: 220rpx;
									height: 48rpx;

									.textLeft {
										font-size: 40rpx;
										width: 44rpx;
										height: 44rpx;
										border-width: 2rpx;
										border-color: #E6E6E6;
										border-style: solid;
										border-radius: 50%;
										text-align: center;
										line-height: 40rpx;
									}

									.input {
										width: 132rpx;
										height: 100%;
										text-align: center;
										border-radius: 4rpx;
										font-size: 24rpx;
										color: #444;
									}

									.textRight {
										font-size: 40rpx;
										width: 44rpx;
										height: 44rpx;
										background-color: rgba(3, 185, 209, 1);
										color: #fff;
										border-radius: 50%;
										text-align: center;
										line-height: 40rpx;
									}
								}
							}
						}
					}
				}
			}
		}

		.end {
			width: 100%;
			height: 90rpx;
			background-color: #fff;
			position: fixed;
			bottom: 100rpx;
			left: 0;
			display: flex;
			align-items: center;
			font-size: 32rpx;

			&-left {
				width: 70%;
				display: flex;
				justify-content: space-between;
				padding: 0 30rpx;

				.all {
					font-size: 32rpx;
					color: #3E3E3E;
					display: flex;
				}

				.end-flex {
					display: flex;
					align-items: center;
				}
			}

			&-right {
				width: 30%;
				line-height: 90rpx;
				background-color: rgba(3, 185, 209, 1);
				text-align: center;
				color: #fff;
			}
		}

		.popup-box {
			width: 600rpx;
			height: 600rpx;
			padding: 30rpx;
			box-sizing: border-box;

			.popup-text {
				font-size: 32rpx;
				margin: 30rpx 0rpx;
			}

			// .popup-button {
			// 	color: #fff;
			// 	font-size: 32rpx;
			// 	background-color: rgba(3, 185, 209, 1);
			// 	margin-top: 60rpx;
			// }
			.popup-button {
				color: #fff;
				font-size: 32rpx;
				background-color: rgba(3, 185, 209, 1);
				margin-top: 60rpx;
				cursor: pointer;
			}

			.popup-button:disabled {
				opacity: 0.5;
				cursor: not-allowed;
			}
		}
	}
</style>